<template>
    <div ref="chartRef" class="trend-chart" />
</template>
<script setup>
import * as echarts from 'echarts'
import { nextTick } from 'process'
import { onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})

const chartRef = ref()
const chartInstance = ref()
const chartData = ref([])
const gapData = ref([])

watch(() => props.data, (newVal) => {
    nextTick(() => {
        // console.log('newVal', newVal);
        if (newVal.length === 0) return
        total.value = chartData.value.reduce((pre, cur) => pre + Number(cur.value), 0)
        chartData.value = newVal
        handleInit()
        initData()
        // chartInstance.value.setOption({
        //     series: [
        //         {
        //             name: "barData",
        //             data: newVal
        //         }
        //     ]
        // })
    })
}, { deep: true, immediate: true })

const colors = ['#159FFF', '#0CEDD0', '#FFB62A', '#f2637b', '#975FE4', '#FF5733', '#FF8C31', '#009688', '#FFC0CB']
const total = ref(0)
// 二次处理数据(处理item 颜色渐变)
function handleInit() {
    // gapData.value = []
    for (var i = 0; i < chartData.value.length; i++) {
        gapData.value.push(
            {
                value: chartData.value[i].value,
                name: chartData.value[i].name,
                itemStyle: {
                    borderWidth: 8,
                    borderColor: colors[i],
                    color: colors[i],
                },
            },
            {
                value: 0,
                name: "",
                itemStyle: {
                    label: { show: false },
                    labelLine: { show: false },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                },
                tooltip: { show: false }
            }
        );
    }
}

handleInit()

const initData = () => {
    total.value = chartData.value.reduce((pre, cur) => pre + Number(cur.value), 0)
    const data = {
        title: {
            text: `{value|${total.value.toString()}}\n{label|总数}`,
            left: '16%',
            top: '36%',
            textStyle: {
                color: '#ffffff',
                fontSize: 30,
                fontWeight: 'bold',
            },
            textStyle: {
                rich: {
                    value: {
                        color: '#FFFFFF',
                        fontSize: 30,
                        lineHeight: 40,
                        fontWeight: 'bold',
                        align: 'center',
                    },
                    label: {
                        color: '#B1CDEB',
                        fontSize: 22,
                        align: 'center',
                    }
                }
            },

        },
        legend: {
            type: "scroll",
            icon: 'none',
            orient: "vertical",
            top: "center",
            right: '10',
            height: "auto",
            itemGap: 10,
            padding: [15, 0, 0, 0],
            data: chartData.value.map(item => item.name),
            formatter: (name) => {
                for (var i = 0; i < chartData.value.length; i++) {
                    if (name == chartData.value[i].name) {
                        const rate = ((chartData.value[i].value / total.value) * 100).toFixed(0);
                        return `{a|${name}} {b|${rate}%}`;
                    }
                }
            },
            align: 'right',
            textStyle: {
                color: '#FFF',
                fontSize: 14,
                rich: {
                    name: {
                        color: 'rgba(255,255,255, 0.9)',
                    },
                    percent: {
                        color: 'rgba(255,255,255, 0.7)',
                    },
                    unit: {
                        color: 'rgba(255,255,255, 0.7)',
                    }
                }
            },

            pageTextStyle: {
                color: "#ffffff"
            }
        },
        series: [
            {
                type: 'pie',
                center: ['30%', '50%'],
                radius: ['77%', '82%'],
                minAngle: '10',
                label: { show: false },
                emphasis: { scale: true, scaleSize: 8, },
                data: gapData.value
            },
            // 圆环
            {
                name: '内圈',
                type: 'pie',
                center: ['30%', '50%'],
                radius: ['65%', '69%'],
                silent: true,
                label: { show: false },
                itemStyle: {
                    color: 'rgba(255,255,255,0.2)'
                },
                emphasis: { scale: false },
                data: [{ value: 0 }]
            },
        ]
    };
    data && chartInstance.value.setOption(data)
}
onMounted(() => {
    chartInstance.value = echarts.init(chartRef.value)
    initData()

    chartInstance.value.on('mouseover', (params) => {
        if (params.seriesType === 'pie' && params.data.name) {
            chartInstance.value.setOption({
                title: {
                    left: '12%',
                    top: '36%',
                    text: `{value|${params.data.value.toString()}}\n{label|${params.data.name}}`,
                }
            })
        }
    })

    chartInstance.value.on('mouseout', () => {
        chartInstance.value.setOption({
            title: {
                left: '16%',
                top: '36%',
                text: `{value|${total.value.toString()}}\n{label|总数}`,
            }
        })
    })
})

onUnmounted(() => {
    
})

</script>

<style scoped lang="scss">
.trend-chart {
    width: 100%;
    height: 235px;
}
</style>